JavaScript 簡單的運算會了

這時候會發現有些狀況
為什麼我運算了

網頁沒更新

或是console.log有更新，但是結果不是我要的

或是慢了一拍

這時

就要說說最常碰到的同步非同步問題，以及生命週期的問題

而生命週期，可以分以下幾階段

輸入網址或點擊超連結
瀏覽器向伺服器送出 request
伺服器回傳回應頁面（HTML, CSS, 和 JavaScript 檔案）
瀏覽器解析回應頁面，建置頁面
瀏覽器監看 event queue，處理互動事件
使用者關閉網頁，結束生命週期

以及學網頁時一定會看到的這張圖

到時候學了框架，會有各框架內的生命週期鉤子需要去理解。

發生不同步或是非預期的狀況通常在以下幾種情況

• 計時器設定事件：setTimeout、setInterval 的function
• API回應事件：傳請求給API，API回應時的事件
• 使用者動作事件：常見的onclick、mousemove、keyup......等等之類的動作

詳細可以參照這篇
https://www.w3schools.com/jsref/dom_obj_event.asp

而通常可以用幾個方式下手

1.改變事件觸發的模型寫法

因為初學者，通常事件都是直接寫在HTML中，所以可能會看到以下程式碼
第一種

<button onclick="alert('提醒視窗')" >

這種方式不是不好，只是容易被寫入攻擊

第二種

var button = document.getElementById("button");
button.onclick = function(){
	console.log("我是要執行的第一個動作");
};
button.onclick = function(){
	console.log("我是要執行的第二個動作，但是我會讓第一個動作被覆蓋喔，嘿嘿");
};

這種寫法稱為on-event 處理器，但是缺點就是一個事件只能綁定一個函式，
如果有很多動作都綁這一個，就會有錯誤。
或是把動作都包到同一個涵式內，只是這樣也許會造成程式的耦合性很高的副作用

所以
第三種寫法是比較好一點的寫法

var button = document.getElementById("button");
button.addEventListener("click", function(){
	console.log("我是要執行的第一個動作");
});
button.addEventListener("click", function(){
	console.log("我是要執行的第二個動作，這次我會乖乖的不覆蓋掉第一個動作");
});

這種寫法稱為
addEventListener 的方法，可以在一個元素上註冊多個事件函式。

下一篇繼續說相關解法